<template>
	<!-- 创作诗歌 -->
	<view class="poem" v-if="poem">
		<form @submit.stop="formSubmit" @reset="">
			<input type="text" hidden name="cover" :value="images"  maxlength="-1"/>
			<view class="upload-images-area">
				<!-- 展示封面 -->
				<view class="images-area" >
					<view class="image-item" v-if="images"   @tap="chooseImages" :data-url="images" >
						<image :src="images" mode="aspectFill"></image>
						<view class="up-cover-desc">替换封面</view>
					</view>
					<!-- 上传封面 -->
					<!-- <view class="upload" @tap="chooseImages" v-if="images.length < 1">
						<image src="/static/images/post/upimage.svg" mode=""></image>
						<view class="up-cover-desc">上传封面</view>
					</view> -->
				</view>
			</view>
			<view class="p-title">
				<view class="title-tip">输入诗歌/诗论/诗词的标题</view>
				<input type="text" name="name" :value="poem.name" placeholder="来个标题好吗" class="cirname" maxlength="15"/>
			</view>
			<view class="p-title">
				<view class="title-tip">输入笔名</view>
				<input type="text" name="p_name" :value="poem.p_name" placeholder="起个笔名吧" class="cirname" maxlength="15"/>
			</view>
			<view class="intro">
				<view class="cir-desc">诗歌简介</view>
				<textarea placeholder="请输入本圈简介~" class="cir-textarea" cols="30" rows="30" maxlength="120"  name="intro"  v-model="val">
				</textarea>
				<view class="count">
					<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{remnant}}</p>
					<view class="">/120</view>
				</view>
			</view>
			<view class="poem-paragraph" v-for="(item,index) in poem.body" :key="index">
				<view class="cir-desc">诗歌第{{index+1}}段</view>
				<textarea placeholder="请输入诗歌内容~" class="cir-textarea" cols="30" rows="30" maxlength="120"  :name="'para'+index "  v-model="item.para">
				</textarea>
			<!-- 	<view class="count">
					<p :class="{'remnant':remnant!=0,'zero':remnant==120}">{{paragraph}}</p>
					<view class="">/120</view>
				</view> -->
			</view>
			<view class="paragraph" @tap="addParagraph">添加段落</view>
			<button class="report" form-type="submit">保存</button>
		</form>
	</view>
	<!-- 创作诗歌 -->
</template>

<script>
	import api from '../../../common/api.js'
	import graceChecker from '../../../common/graceChecker.js'
	
	export default {
		data() {
			return {
				poem:{},
				activeTab:0,
				cateList:[{name:'诗歌'},{name:'小说'}],
				upload_api: this.uploadApi ,//图片上传url
				images:'',	//诗歌封面图
				lists:[{}],
				repost:1,
				nextId:1,
				val: "",    //简介字数
				paragcourt:"" //段落内容字数
			}
		},
		computed: {
			remnant(e) {//实时记录输入字数
				return  this.val.length;
			},
			paragraph(value) {
				console.log(value);
				return function(value) {
				return this.value.length
				}
			}
	
		},
		async onLoad(p) {
			this.pid = p.pid
			this.poem = await api.GetPoemDetail(this.pid)
			console.log(this.poem);
			this.val = this.poem.intro
			this.images = this.poem.cover
			console.log(this.images);
		},
		
		methods:{
			
			changeTab(e) {
				this.activeTab = e
			},
			
			addParagraph() {//添加文章段落
			console.log('--------------------');
				this.poem.body.push({para:''})
			},
			
			// 诗歌操作
			async formSubmit(e) {//表单提交
			console.log(e.detail.value);
				var arr  = []
				var pattern = /^para.*/
				
				for(let item in e.detail.value) {
					if(pattern.test(item) ){
						arr.push({para:e.detail.value[item]})
					}
				}
				
				// if(!this.repost) {
				// 	uni.showToast({ title: '勿重复提交 ', icon: "none" });
				// 	return 
				// }
				
				
				var rule = [
					{name:"cover", checkType : "notnull", errorMsg:"请上传诗歌封面"},
					{name:"name", checkType : "notnull", errorMsg:"请输入诗歌名称"},
					{name:"p_name", checkType : "notnull", errorMsg:"请输入笔名"},
					{name:"intro", checkType : "notnull", errorMsg:"请输入诗歌简介"},
				];
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				if(arr.length == 0) {
					uni.showToast({ title: '诗歌内容不能为空 ', icon: "none" });
					return
				}else {
					for(var obj of arr) {
						console.log(obj);
						for(var key in obj) {
							if(!obj[key]) {
								console.log('-----------');
								uni.showToast({ title: '诗歌内容不能为空 ', icon: "none" });
								return
							}
						}
							
					}
				}
				this.repost = 0 
				uni.showLoading({
					title:'提交中'
				});
				
				var {name,p_name,intro} = e.detail.value
				var jbody = JSON.stringify(arr)
				console.log(jbody);
				var res = await api.EditPoems(this.pid,name,p_name,intro,this.images,jbody)
				console.log(res);
				if(res.err == 0)  {
					uni.hideLoading()
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}
			},
			
			
			viewImage(e) {//预览图片
				uni.previewImage({
					urls: [this.images],
					current: e.currentTarget.dataset.url
				});
			},
			
			delImg(e) {//删除图片
					this.images = ''
			},
			
			chooseImages() {//上传相集images
					var _self = this
					uni.chooseImage({
						count:1,//默认1
						sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
						sourceType: ['album','camera'],  //从相册选择或者拍照 'album','camera'
						success: (res) => {
							console.log(res);
							res.tempFilePaths.forEach((item,index)=>{
								uni.showLoading({title:"上传中"});
								var uploadTask = uni.uploadFile({
									url: _self.upload_api,
									// url:'http://bbtest.test/api/upload',
									filePath: item,
									fileType: 'image',
									name: 'file',
									dataType: 'json',
									success: function (uploadFileRes) {
										// 上传成功后返回服务器端保存的路径
										var jsondata = JSON.parse(uploadFileRes.data)
										if( jsondata.err ==0 ){
											_self.images = jsondata.file_path
											uni.hideLoading();
											uni.showToast({
												title: jsondata.msg,
												duration:800
											})
										}else{
												uni.showToast({
													title:jsondata.msg,
													icon:'none'
												})
											}
										}
								 });
							})
						}
					});
			},
		}
	}
</script>

<style lang="scss">
.poem {
	// margin-top: 110rpx;
	padding: 20rpx 30rpx;
	background-color: #fff;
	.p-title{
		padding: 20rpx 0;
		font-size: 30rpx;
		.title-tip {
			margin: 15rpx 10rpx;
		}
		input {
			font-size: 28rpx;
			border: 2rpx solid #F3F6F5;
			margin: 10rpx 0;
			background: rgba(246,247,249,0.9);
			border-radius: 15rpx;
		  padding: 20rpx 30rpx;
		}
	}
}
.paragraph {
	background-color: rgba(226,238,254,.9);
	color: #1472FE;
}
.report {
	background-color: #1a77fe;
	color: #fff;
	margin: 30rpx 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 82rpx;
	border-radius: 10rpx;
}
.paragraph {
	padding: 15rpx 0;
	border-radius: 10rpx;
	padding: 15rpx 0;
	text-align: center;
	margin: 30rpx  80rpx;
	height: 55rpx;
	line-height: 55rpx;
}
.poem-paragraph {
	margin-top: 40rpx;
}
.paragraph {
	background-color: rgba(226,238,254,.9);
	color: #1472FE;
}
.intro,.poem-paragraph {
	position: relative;
	font-size: 30rpx;
	background-color: #fff;
	.cir-desc {
		margin: 10rpx;
	}
	.cir-textarea {
		border: 2rpx solid #F3F6F5;
		margin: 10rpx 0;
		background: rgba(246,247,249,0.5);
		border-radius: 15rpx;
		line-height: 34rpx;
	}
	.count {
		display: flex;
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		color: #999;
		.remnant {
			color: #999;
		}
		.zero{
			color: #FF0000;
		}
	}
	textarea {
		height: 210rpx;
		width: 650rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
}
.upload-images-area {
	/* width: 750rpx;
	margin: 0 auto;
	height: 1000rpx; */
	display: flex;
	justify-content: center;
	padding: 10rpx 15rpx;
	
	.images-area {	
		display: flex; 
		flex-wrap: wrap;
		// width: 700rpx;
		box-sizing: border-box;
		.image-item {
			position: relative;
			width: 220rpx;
			height: 210rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.up-cover-desc {
				position: absolute;
				width: 220rpx;
				text-align: center;
				// left: 0;
				// right: 0;
				// margin: 0 auto;
				color: #FFFFFF;
				background-color:rgba(122,122,122,.8);
				bottom: 0;
				border-bottom-left-radius: 10rpx;  
				border-bottom-right-radius: 10rpx; 
			}
		}
		.upload {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: center;
			width: 220rpx;
			height: 210rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			border: 1rpx solid #F3F6F5;
			background: rgba(245,245,245,.8);
			.up-cover-desc {
				position: absolute;
				width: 220rpx;
				text-align: center;
				// left: 0;
				// right: 0;
				// margin: 0 auto;
				color: #FFFFFF;
				background-color:rgba(122,122,122,.8);
				bottom: 0;
				border-bottom-left-radius: 10rpx;  
				border-bottom-right-radius: 10rpx; 
			}
			image {
				width: 60%;
				height: 58%;
			}
		}
	}
}
</style>
